<template>
  <div>
    <table class="table table-bordered">
      <tr>
        <td>
          <table class="table">
            <!-- <thead class="thead-inverse"> -->
            <tr>
              <th colspan="2">
                <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;&nbsp;&nbsp;
                燃气表{{'[' + f_meters.length + ']'}}&nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-plus" @click="addMeter"></span>
              </th>
            </tr>
            <!-- </thead> -->
            <tbody v-for="row in f_meters">
              <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[{{$index+1}}]
                  &nbsp;<span class="glyphicon glyphicon-th-list" @click="editMeter($index)"></span></td>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="removeMeter(row)"></span>
                  <!-- &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-th-list" @click="editMeter($index)"></span> -->
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table class="table">
            <!-- <thead class="thead-inverse"> -->
            <tr>
              <th colspan="2">
                <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;&nbsp;&nbsp;
                立管{{'[' + f_plumbs.length + ']'}}&nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__"  class="glyphicon glyphicon-plus" @click="addPlumb"></span>
              </th>
            </tr>
            <!-- </thead> -->

            <tbody v-for="row in f_plumbs">
              <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[{{$index+1}}]
                  &nbsp;<span class="glyphicon glyphicon-th-list" @click="editPlumb($index)"></span>
                </td>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span  :class="style__" class="glyphicon glyphicon-trash" @click="removePlumb(row)"></span>
                  <!-- &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-th-list" @click="editPlumb($index)"></span> -->
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table class="table">
            <!-- <thead class="thead-inverse"> -->
            <tr>
              <th colspan="2">
                <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;&nbsp;&nbsp;
                阀门{{'[' + f_valves.length + ']'}}&nbsp;&nbsp;&nbsp;&nbsp;<span  :class="style__" class="glyphicon glyphicon-plus" @click="addValve"></span>
              </th>
            </tr>
            <!-- </thead> -->
            <tbody v-for="row in f_valves">
              <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[{{$index+1}}]
                    &nbsp;<span class="glyphicon glyphicon-th-list" @click="editValve($index)"></span>
                </td>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span  :class="style__" class="glyphicon glyphicon-trash" @click="removeValve(row)"></span>
                  <!-- &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-th-list" @click="editValve($index)"></span> -->
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table class="table">
            <!-- <thead class="thead-inverse"> -->
            <tr>
              <th colspan="2">
                <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;&nbsp;&nbsp;
                户内管{{'[' + f_inner_plumbs.length + ']'}}&nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__"  class="glyphicon glyphicon-plus" @click="addInnerPlumb"></span>
              </th>
            </tr>
            <!-- </thead> -->
            <tbody v-for="row in f_inner_plumbs">
              <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[{{$index+1}}]
                    &nbsp;<span class="glyphicon glyphicon-th-list" @click="editInnerPlumb($index)"></span>
                </td>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="removeInnerPlumb(row)"></span>
                  <!-- &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-th-list" @click="editInnerPlumb($index)"></span> -->
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table class="table">
            <!-- <thead class="thead-inverse"> -->
            <tr>
              <th colspan="2">
                <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;&nbsp;&nbsp;
                报警器{{'[' + f_alarms.length + ']'}}&nbsp;&nbsp;&nbsp;&nbsp;<span  :class="style__" class="glyphicon glyphicon-plus" @click="addAlarm"></span>
              </th>
            </tr>
            <!-- </thead> -->
            <tbody v-for="row in f_alarms">
              <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[{{$index+1}}]
                    &nbsp;<span class="glyphicon glyphicon-th-list" @click="editAlarm($index)"></span>
                </td>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="removeAlarm(row)"></span>
                  <!-- &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-th-list" @click="editAlarm($index)"></span> -->
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table class="table">
            <!-- <thead class="thead-inverse"> -->
            <tr>
              <th colspan="2">
                <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;&nbsp;&nbsp;
                灶具{{'[' + f_cookers.length + ']'}}&nbsp;&nbsp;&nbsp;&nbsp;<span  :class="style__" class="glyphicon glyphicon-plus" @click="addCooker"></span>
              </th>
            </tr>
            <!-- </thead> -->
            <tbody v-for="row in f_cookers">
              <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[{{$index+1}}]
                    &nbsp;<span class="glyphicon glyphicon-th-list" @click="editCooker($index)"></span>
                </td>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="removeCooker(row)"></span>
                  <!-- &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-th-list" @click="editCooker($index)"></span> -->
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table class="table">
            <!-- <thead class="thead-inverse"> -->
            <tr>
              <th colspan="2">
                <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;&nbsp;&nbsp;
                热水器{{'[' + f_heaters.length + ']'}}&nbsp;&nbsp;&nbsp;&nbsp;<span  :class="style__" class="glyphicon glyphicon-plus" @click="addHeater"></span>
              </th>
            </tr>
            <!-- </thead> -->
            <tbody v-for="row in f_heaters">
              <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[{{$index+1}}]
                  &nbsp;<span class="glyphicon glyphicon-th-list" @click="editHeater($index)"></span>
                </td>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="removeHeater(row)"></span>
                  <!-- &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-th-list" @click="editHeater($index)"></span> -->
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table class="table">
            <!-- <thead class="thead-inverse"> -->
            <tr>
              <th colspan="2">
                <img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;&nbsp;&nbsp;
                壁挂炉{{'[' + f_furnaces.length + ']'}}&nbsp;&nbsp;&nbsp;&nbsp;<span  :class="style__" class="glyphicon glyphicon-plus" @click="addFurnace"></span>
              </th>
            </tr>
            <!-- </thead> -->
            <tbody v-for="row in f_furnaces">
              <tr>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[{{$index+1}}]
                  &nbsp;<span class="glyphicon glyphicon-th-list" @click="editFurnace($index)"></span>
                </td>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span :class="style__" class="glyphicon glyphicon-trash" @click="removeFurnace(row)"></span>
                  <!-- &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-th-list" @click="editFurnace($index)"></span> -->
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </table>
    <div style="height:50px;"></div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  title: '安检设备界面',
  data() {
    return this.$parent.$parent.data
  },
  methods: {
    addMeter() {
      let meter = {}
      this.f_meters.push(meter)
      this.$goto('paper-meter', {idx: this.f_meters.length-1}, 'paper-router')
    },
    editMeter(idx) {
      this.$goto('paper-meter', {idx: idx}, 'paper-router')
    },
    removeMeter(item) {
      this.f_meters.$remove(item)
    },
    addPlumb() {
      let plumb = {}
      this.f_plumbs.push(plumb)
      this.$goto('paper-plumb', {idx: this.f_plumbs.length-1}, 'paper-router')
    },
    editPlumb(idx) {
      this.$goto('paper-plumb', {idx: idx}, 'paper-router')
    },
    removePlumb(item) {
      this.f_plumbs.$remove(item)
    },
    addValve() {
      let valve = {}
      this.f_valves.push(valve)
      this.$goto('paper-valve', {idx: this.f_valves.length-1}, 'paper-router')
    },
    editValve(idx) {
      this.$goto('paper-valve', {idx: idx}, 'paper-router')
    },
    removeValve(item) {
      this.f_valves.$remove(item)
    },
    addInnerPlumb() {
      let innerPlumb = {}
      this.f_inner_plumbs.push(innerPlumb)
      this.$goto('paper-inner-plumb', {idx: this.f_inner_plumbs.length-1}, 'paper-router')
    },
    editInnerPlumb(idx) {
      this.$goto('paper-inner-plumb', {idx: idx}, 'paper-router')
    },
    removeInnerPlumb(item) {
      this.f_inner_plumbs.$remove(item)
    },
    addAlarm() {
      let alarm = {}
      this.f_alarms.push(alarm)
      this.$goto('paper-alarm', {idx: this.f_alarms.length-1}, 'paper-router')
    },
    editAlarm(idx) {
      this.$goto('paper-alarm', {idx: idx}, 'paper-router')
    },
    removeAlarm(item) {
      this.f_alarms.$remove(item)
    },
    addCooker() {
      console.log('add cooker')
      let cooker = {}
      this.f_cookers.push(cooker)
      this.$goto('paper-cooker', {idx: this.f_cookers.length-1}, 'paper-router')
    },
    editCooker(idx) {
      this.$goto('paper-cooker', {idx: idx}, 'paper-router')
    },
    removeCooker(item) {
      this.f_cookers.$remove(item)
    },
    addHeater() {
      let heater = {}
      this.f_heaters.push(heater)
      this.$goto('paper-heater', {idx: this.f_heaters.length-1}, 'paper-router')
    },
    editHeater(idx) {
      this.$goto('paper-heater', {idx: idx}, 'paper-router')
    },
    removeHeater(item) {
      this.f_heaters.$remove(item)
    },
    addFurnace() {
      let furnace = {}
      this.f_furnaces.push(furnace)
      this.$goto('paper-furnace', {idx: this.f_furnaces.length-1}, 'paper-router')
    },
    editFurnace(idx) {
      this.$goto('paper-furnace', {idx: idx}, 'paper-router')
    },
    removeFurnace(item) {
      this.f_furnaces.$remove(item)
    },
  },
  ready() {
    if(!this.f_meters)
      this.$set('f_meters', [])
    if(!this.f_plumbs)
      this.$set('f_plumbs', [])
    if(!this.f_valves)
      this.$set('f_valves', [])
    if(!this.f_inner_plumbs)
      this.$set('f_inner_plumbs', [])
    if(!this.f_alarms)
      this.$set('f_alarms', [])
    if(!this.f_cookers)
      this.$set('f_cookers', [])
    if(!this.f_furnaces)
      this.$set('f_furnaces', [])
    if(!this.f_heaters)
      this.$set('f_heaters', [])
  }
}
</script>
